<template>
  <a-button
    v-if="showButton"
    @click="openRecordModal"
    :type="type || 'default'"
    :class="className"
    size="small"
  >
    <slot>行为记录</slot>
  </a-button>
  <a-modal
    v-bind="$props"
    width="min(90%,1000px)"
    v-model:visible="visible"
    @cancel="close"
    :footer="null"
  >
    <template #title>
      <div class="d-flex-modal-title">
        <div>行为记录</div>
      </div>
    </template>
    <a-table
      :columns="columns"
      :data-source="tableData"
      size="small"
      :pagination="false"
      :row-key="(record, index) => index"
      bordered
    >
      <template #signDetail="{ record }">
        <div
          v-if="record.signDetail"
          v-html="parseText(record.signDetail)"
        ></div>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { reactive, toRefs, inject, watchEffect } from 'vue'
import fetchApply from '../server/axios.js'
export default {
  props: {
    className: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    showButton: {
      type: Boolean,
      default: true
    },
    recordParams: null
  },
  setup(props) {
    const recordParams = props.recordParams || inject('recordParams')

    const state = reactive({
      visible: false,
      tableData: [],
      columns: [
        {
          title: '行为内容',
          key: 'signDetail',
          width: '320px',
          slots: { customRender: 'signDetail' }
        },
        {
          title: '部门',
          key: 'department',
          dataIndex: 'department',
          ellipsis: true,
          width: '150px'
        },
        {
          title: '操作人',
          key: 'operUserName',
          dataIndex: 'operUserName',
          ellipsis: true,
          width: '100px'
        },
        {
          title: '操作时间',
          key: 'gmtCreate',
          dataIndex: 'gmtCreate',
          ellipsis: true,
          width: '180px'
        }
      ]
    })
    const openRecordModal = () => {
      state.visible = true
    }
    const parseText = text => {
      return text
        .replaceAll(/\n/g, '<br>')
        .replaceAll(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
    }
    const close = () => {
      state.visible = false
    }
    const getCurrentLog = async () => {
      fetchApply('/pro-proof/select-sign-info', recordParams).then(res => {
        state.tableData = res.data || []
      })
    }
    watchEffect(() => {
      if (state.visible) {
        state.tableData = []
        getCurrentLog()
      }
    })
    return {
      ...toRefs(state),
      openRecordModal,
      close,
      parseText,
      getCurrentLog
    }
  }
}
</script>

<style scoped>
.d-flex-modal-title {
  display: flex;
  width: calc(100% - 30px);
  justify-content: space-between;
}
</style>
